<template>
  <div id="teamPage">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="addTeamData.name"
            name="name"
            label="队伍名称"
            placeholder="请输入队伍名"
            :rules="[{ required: true, message: '请输入队伍名' }]"
        />
        <van-field
            v-model="addTeamData.description"
            rows="1"
            autosize
            label="队伍描述"
            type="textarea"
            placeholder="请输入队伍描述"
        />

        <van-field
            is-link
            readonly
            name="dateTimePicker"
            label="过期时间选择"
            :placeholder="nowExpireTime?? '请选择过期时间'"
            @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-date-picker
              :v-model="addTeamData.expiretime"
              title="请选择过期时间"
              :min-date="tomorrow"
              @confirm="onConfirm"
          />
        </van-popup>

        <van-field name="radio" label="选择队伍状态">
          <template #input>
            <van-radio-group v-model="addTeamData.status" direction="horizontal">
              <van-radio name="0">公开</van-radio>
              <van-radio name="1">私有</van-radio>
              <van-radio name="2">加密</van-radio>
            </van-radio-group>
          </template>
        </van-field>


        <van-field
            v-if="Number(addTeamData.status) === 2"
            v-model="addTeamData.password"
            name="userPassword"
            label="队伍密码"
            placeholder="请输入队伍密码"
            :rules="[{ required: true, message: '请输入队伍密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
<!--  {{ addTeamData }}-->
</template>


<script setup lang="ts">
import {onMounted, ref} from 'vue';
import {useRouter, useRoute} from "vue-router";
import moment from 'moment';
import {showSuccessToast} from "vant";
import myAxios from "../../plugins/myAxios.ts";


const initFormData = {
  "name": "",
  "description": "",
  "expiretime": null,
  "maxnum": 5,
  "password": "",
  "status": 0,
}
// 最小时间为当前时间
const today = new Date(); // 获取当前日期
const tomorrow = new Date(today); // 创建一个新的 Date 对象，与今天相同
tomorrow.setDate(today.getDate() + 1); // 在今天的日期上加一天，即明天

// 是否显示时间选择器
const showPicker = ref(false);

const router = useRouter();
const route = useRoute();

// 需要用户填写的表单数据 对象扩展
const addTeamData = ref({...initFormData});

const nowExpireTime = ref();

const id = route.query.id;


onMounted(async () => {
  if (id <= 0) {
    showSuccessToast('队伍不存在');
    return;
  }
  const res = await myAxios.get("/team/get", {
    params: {
      id: id
    }
  })

  if (res?.code === 0 && res.data) {
    addTeamData.value = res.data;
  } else {
    showSuccessToast('获取队伍信息失败');
  }
})


// 提交
const onSubmit = async () => {
  const postData = {
    ...addTeamData.value,
    status: Number(addTeamData.value.status),
    expireTime: moment(addTeamData.value.expiretime).format("YYYY-MM-DD HH:mm:ss")
  }
  const res = await myAxios.post("/team/update", postData);
  if (res?.code === 0 && res.data) {
    router.push({
      path: '/team',
      replace: true,
    });
  } else {
    showSuccessToast('更新失败');
  }
}


// 时间选择器确认
const onConfirm = ({selectedValues}) => {
  nowExpireTime.value = moment(selectedValues.join('-')).format('YYYY-MM-DD HH:mm:ss')
  addTeamData.value.expiretime = nowExpireTime.value
  showPicker.value = false;
};

</script>

<style scoped>

</style>